import React,{ PropTypes } from 'react';
import { Link } from 'react-router';
import { Grid,Row,Col,Input,Image } from 'react-bootstrap';
import Chart from "chart.js";
import { VelocityComponent } from 'velocity-react';

import '../styles/icono.min.css';


const NFCPage = () =>{
  const handleChange = (e) => {
    //console.log(e.target.value);
  };
  const randomScalingFactor = () => {
   return Math.round(Math.random()*100);
  };
  const lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
      {
        label: "My First dataset",
        fillColor : "rgba(220,220,220,0.2)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : "rgba(220,220,220,1)",
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      },
      {
        label: "My Second dataset",
        fillColor : "rgba(151,187,205,0.2)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : "rgba(151,187,205,1)",
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  };
  const componentDidMount = () =>{
    let ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
      responsive: true
    });
  };


  return (
    <Grid>
      <Row className="show-grid">
        <Col xs={12} md={12}>
          <Input type="text"
            value=""
            placeholder="输入姓名、手机号"
            bsStyle="success"
            wrapperClassName="col-xs-offset-8 col-xs-4"
            onChange={handleChange} />
        </Col>
        <VelocityComponent animation={{ opacity: 1 }} duration={500}>


        <Col xs={6} md={3}>
          <p>读卡</p>
          <div>
            <Image src="http://react-bootstrap.github.io/assets/thumbnail.png" alt="读卡" responsive thumbnail/>
          </div>
        </Col>

        </VelocityComponent>


        <Col xs={6} md={3}>
          <p>设备管理</p>
          <div>
            <Image src="http://react-bootstrap.github.io/assets/thumbnail.png" alt="设备管理" responsive thumbnail/>
          </div></Col>
        <Col xs={6} md={3}>
          <p>开门记录</p>
          <div>
            <Image src="http://react-bootstrap.github.io/assets/thumbnail.png" alt="开门记录" responsive thumbnail/>
          </div>
        </Col>
        <Col xs={6} md={3}>
          <p>门禁广告</p>
          <div>
            <Image src="http://react-bootstrap.github.io/assets/thumbnail.png" alt="门禁广告" responsive thumbnail/>
          </div>
        </Col>
      </Row>

      <Row className="show-grid">
        <Col xs={6} md={6}>
          <p>开卡量统计</p>
          <div>
            <Image src="http://react-bootstrap.github.io/assets/thumbnail.png" alt="设备管理" responsive thumbnail/>
          </div>
        </Col>
        <Col xs={6} md={6}>
          <p>开卡类型统计</p>
          <div>
            <div className="icono-mail"></div>
          <span className="icono-mail"></span>
          <whatever className="icono-mail"></whatever>
            <Image src="http://react-bootstrap.github.io/assets/thumbnail.png" alt="开门记录" responsive thumbnail/>
          </div>
        </Col>
      </Row>

      <Row className="show-grid">
        <Col xs={12} md={12}>
          <p>门禁使用量统计</p>
          <canvas id="canvas" height="450" width="600"></canvas>
        </Col>
      </Row>
    </Grid>
  );
};

export default NFCPage;

